<template>
  <div id="letContent1">
       <dv-border-box-1>
            <div class="bg-black">
                <div class="d-flex pt-2 pl-2">
                    <div class="d-flex">
                    <dv-decoration-1 style="width:1.25rem;height:.25rem; position:relative;top:-.0375rem;" />
                    </div>
                </div>
                <div class="d-flex jc-center">
                  <div class="up">
                    <div class="bg-color-black item" v-for="item in titleItem" :key="item.title">
                      <p class="ml-3 colorBlue fw-b">{{item.title}}</p>
                      <div class="numberDiv">
                        <dv-digital-flop :config="item.number" style="width:1.4rem;height:.625rem;" />
                        <span :style="getColor(item.yoyType)">{{item.yoy}}</span>
                      </div>
                    </div>
                  </div>
                </div>
            </div>
       </dv-border-box-1>
    
  </div>
</template>

<script>
import {let1Data} from '@/utils/data'
export default {
  data() {
    return {
        text:'',
        titleItem: [
        {
          title: "累积点位检查",
          number: {
            number: [0],
            toFixed: 1,
            content: "{nt}"
          },
          yoy:'',
        },
        {
          title: "本月点位检查",
          number: {
            number: [0],
            toFixed: 1,
            content: "{nt}"
          },
          yoy:'',
        },
        {
          title: "当月问题数量",
          number: {
            number: [0],
            toFixed: 1,
            content: "{nt}"
          },
          yoy:'',
        },
        {
          title: "当月前整改率",
          number: {
            number: [0],
            toFixed: 1,
            content: "{nt}"
          },
          yoy:'',
        },
        {
          title: "本月居民问卷调查得分",
          number: {
            number: [0],
            toFixed: 1,
            content: "{nt}"
          },
          yoy:'',
        },
        {
          title: "本月未成年人问卷调查得分",
          number: {
            number: [0],
            toFixed: 1,
            content: "{nt}"
          },
          yoy:'',
        }],
        
    };
  },
  components: {
  },
  mounted() {
    this.getData();
  },
  methods: {
    // 获取数据
    getData(){
      setTimeout(() => {
        this.titleItem = let1Data;
      }, 300);
    },
    // 判断同比颜色
    getColor(type){
      let color = '';
      switch (type) {
        case 1:
          color = '#d3d6dd';
          break;
        case 2:
          color = '#4dea4b';
          break;
        case 3:
          color = '#f35e5e';
          break;
      
        default:
          break;
      }
      return 'color:'+ color;
    }
  }
};
</script>

<style lang="scss">
#letContent1 {
  padding: 0rem;
  height: 29%;
  min-width: 3.75rem;
  border-radius: 0.0625rem;
    .bg-black {
        height: 100%;
        border-radius: 0.125rem;
        background-color: #13192f00;
        padding: 0.2rem;
    }
    .text {
        font-family: 'MEDIUM';
        color: #fff;
    }
    .chart-box {
        margin-top: 0.2rem;
        width: 2.125rem;
        height: 2.125rem;
        .active-ring-name {
            padding-top: 0.125rem;
        }
    }
    .up {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      .item {
        border-radius: 0.0625rem;
        padding-top: 0.2rem;
        margin-top: 0.1rem;
        width: 32%;
        height: 45%;
        .numberDiv{
          display: flex;
          align-items: center;
        }
      }
    }
}
</style>